
<!-- 详情页面 -->
<template>
  <div class="sharelifeDetails">
    <myheader :title="title" rightBtn="主页" @updataInfo="goHome"></myheader>
    <div class="content">
      <van-cell-group>
        <!-- 顶部栏 -->
        <van-cell>
          <div class="top">
            <div class="left">
              <div class="imgBox">
                <van-swipe lazy-render :autoplay="3000">
                  <van-swipe-item
                    v-for="(items,indexs)  in   dynamic.imgList "
                    :key="indexs"
                    @click.stop="bigImg(indexs)"
                    fit="contain"
                  >
                    <van-image :src="items">
                      <template v-slot:loading>
                        <van-loading size="20px" vertical>加载中...</van-loading>
                      </template>
                    </van-image>
                  </van-swipe-item>
                </van-swipe>
              </div>
              <div class="info" v-if="dynamic.user">
                <van-image
                  style="float:left;width:1.8rem; height:1.8rem;"
                  lazy-load
                  :src="dynamic.user.avatar"
                >
                  <template v-slot:error>加载失败</template>
                </van-image>
                <div style="float:left;" class="decs">
                  <span>昵称:{{dynamic.user.username}}</span>
                  <span>动态:{{dynamic.tag}}</span>
                  <span>现居住:{{dynamic.user.city}}</span>
                </div>
              </div>
            </div>
          </div>
        </van-cell>

        <!-- 文字 -->
        <van-divider dashed></van-divider>
        <van-cell>
          <template #title>
            <p class="custom-title">{{dynamic.content}}</p>
          </template>
        </van-cell>
      </van-cell-group>

      <van-row>
        <div class="comment">
          <span style="font-size:0.3rem;">共{{commentList.length}}条评论</span>
          <el-input
            v-model="comment"
            show-action
            label="地址"
            placeholder="点赞是喜欢，留言才是真爱"
            class="input"
            style="margin-top:10px;"
          >
            <template #prepend>
              <van-image
                v-if="$store.getters.getUserInfo"
                style="width:1rem; height:1rem;"
                lazy-load
                round
                :src="$store.getters.getUserInfo.avatar"
              />
            </template>
            <template #append>
              <el-button @click="summitComment">评论</el-button>
            </template>
          </el-input>

          <!--评论  -->
          <van-skeleton v-if="!flag" title avatar :row="5" />
          <div v-else>
            <van-row v-for="(item,index) in commentList" :key="index" style=" margin-top: 40px ;">
              <van-row style="width:20%;" v-if="item.user">
                <van-image :src="item.user.avatar" style="width:1rem; height:1rem;" round>
                  <template v-slot:loading>
                    <van-loading size="20px" vertical>加载中...</van-loading>
                  </template>
                </van-image>
              </van-row>

              <van-row style="width:80%;" v-if="item.user">
                <van-row style="font-size:0.4rem;">{{item.user.username}}</van-row>

                <van-row style="width:100%;font-size:0.3rem;">{{item.content}}</van-row>
                <van-row
                  style="width:100%; font-size:0.3rem;   position: relative;"
                >{{formatDateTime(item.createTime)}}</van-row>
              </van-row>
              <div class="lin"></div>
            </van-row>
          </div>
        </div>
      </van-row>
    </div>
  </div>
</template>

<script>
import myheader from './myheader.vue'
import formatDateTime from '../utils/data'
import { ImagePreview, Toast } from 'vant'
export default {
  components: {
    myheader,
  },
  data() {
    return {
      title: '',
      dynamicId: this.$route.params.id,
      dynamic: [],
      comment: '', //用户品论
      commentList: [], //动态评论列表
      flag: false,
    }
  },
  created() {
    this.init()
  },
  methods: {
    formatDateTime(val) {
      return formatDateTime.formatDateTime4(val)
    },
    async init() {
      const res = await this.$axios.get('/dynamic/info/' + this.dynamicId)
      if (res.data.code == 200) {
        this.dynamic = res.data.data
        this.title = this.dynamic.title
        this.commentList = res.data.data.commentList
        this.flag = true
      }
    },
    // 发表评论
    async summitComment() {
      if (!this.$store.getters.getUserInfo) {
        Toast('请先登录才能购买呦 (づ￣3￣)づ╭❤～')
        this.$router.push('/login')
      } else {
        const res = await this.$axios.post('/dynamic/sendComment', {
          userId: this.$store.getters.getUserInfo.id,
          dynamicId: this.dynamicId,
          content: this.comment,
        })
        if (res.data.code == 200) {
          this.init()
          Toast('评论成功(^o^)/~')
        } else {
          Toast('评论成功o(╥﹏╥)o')
        }
      }
    },
    // 大图预览
    bigImg(indexs) {
      ImagePreview({
        images: this.dynamic.imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
    goHome() {
      this.$router.push('/home')
    },
  },
}
</script>

<style  scoped>
.sharelifeDetails {
  margin-top: 46px;
}
.content {
  margin-top: 46px;
}
.van-icon {
  vertical-align: middle;
  margin-bottom: 3px;
}
.van-cell {
  border: none !important;
}

.custom-title {
  text-indent: 2em;
}
.info {
  margin-top: 15px;
  width: 100%;
}
.decs {
  float: left;
  margin-left: 10px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.van-image__img {
  border-radius: 4px;
}
/* 评论 */
.comment {
  padding: 3%;
}
.input {
  border-radius: 20px;
}
.comment_bottom {
  margin-top: 15px;
}
.lin {
  width: 95vw;
  height: 1px;
  border-bottom: 1px dashed #ccc;
  margin: 5px auto;
}
</style>>
 